<template>
  <div class="luck-draw">
      <div class="slogan"></div>
      <p class="draw-count">每人每天最多抽奖12次，今日剩余次数{{drawCount}}次</p>
      <div class="luck-wheel-wrap">
          <div class="wheel-w" :style="{transform:rotate_angle}">
              <div class="wheel-n">
                  <img v-for="(item, index) in prizes" :key="index" :src="item.prizeImg" alt="" class="prize-img">
              </div>
              <div class="rod"></div>
          </div>
          <div class="draw-btn" @click="rotating(random(1,8))">开始抽奖</div>
      </div>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      drawCount: 3,    // 可抽奖次数
      prizes: [
        {prizeImg: require('./img2/ic_prize.png'), title: '现金88元'},
        {prizeImg: require('./img2/ic_prize.png'), title: '高佣红包2元'},
        {prizeImg: require('./img2/ic_prize.png'), title: '红包碎片2'},
        {prizeImg: require('./img2/ic_prize.png'), title: '高佣红包1元'},
        {prizeImg: require('./img2/ic_prize.png'), title: '红包碎片5'},
        {prizeImg: require('./img2/ic_prize.png'), title: '现金8.88元'},
        {prizeImg: require('./img2/ic_prize.png'), title: '红包碎片10'},
        {prizeImg: require('./img2/ic_prize.png'), title: '红包碎片1'},
      ],
      start_rotating_degree: 0,   //初始旋转角度
      rotate_angle: 0,            //将要旋转的角度
      click_flag: true,           // 是否可以旋转抽奖
      result_index: 0,            // 中奖标志
    }
  },
  computed: {
  },
  methods: {
    // 转盘转动
    rotating(index) {
      if(this.drawCount<=0) {
        this.$toast('很遗憾没有抽奖机会了~')
        return
      }
      if (this.drawLock) {
        return
      }
      let that = this
      this.drawLock = true; // 旋转结束前，不允许再次触发
      let during_time = 6; // 动画执行时间
      this.result_index = index; //数组下标和对象id保持一致
      //最终会旋转到下标的位置所需要的度数
      let result_angle = {
        2: 360,
        3: 315,
        4: 270,
        5: 225,
        6: 180,
        7: 135,
        8: 90,
        1: 45
      };


      // 转动盘子
      //初始角度+多转券数*360+选择下标的度数-初始角度%360
      //多转动的角度 this.start_rotating_degree % 360
      let randoms = this.random(10, 40);
      let rotate_angle = this.start_rotating_degree + 4 * 360 + result_angle[this.result_index] + (360 - this.start_rotating_degree % 360) - randoms;
      this.start_rotating_degree = rotate_angle;
      this.rotate_angle = "rotate(" + rotate_angle + "deg)";

      // 旋转结束后，允许再次触发
      setTimeout(() => {
        this.drawLock = false;
        this.$toast(`恭喜抽中${this.prizes[index-1].title}`)
        this.drawCount--
      }, during_time * 1000 + 1000); // 延时，保证转盘转完
    },
    //随机数
    random(min, max) {
      var random = max - min + 1;
      return Math.floor(Math.random() * random + min);
    },
  }
}
</script>

<style scoped lang="less">
    .luck-draw {
        min-height: 100vh;
        background-image: url("./img2/bg.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-color: #b9e8fb;
        position: relative;
        padding-top: 316px;
        .slogan {
            width: 712px;
            height: 164px;
            background-image: url("./img2/slogan.png");
            background-size: 100% 100%;
            position: absolute;
            top: 22px;
            left: 20px;
        }
        .draw-count {
            width: 716px;
            height: 92px;
            line-height: 92px;
            background-image: url("./img2/wenzitiao@2x.png");
            background-size: 100% 100%;
            text-align: center;
            font-size: 28px;
            color: #FDF9F9;
            position: absolute;
            top: 172px;
            left: 18px;
        }
        .luck-wheel-wrap {
            width: 750px;
            height: 716px;
            background-image: url("./img2/liwu_dazhuanpan@2x.png");
            background-size: 528px 252px;
            background-position: 116px 0;
            background-repeat: no-repeat;
            position: relative;
            padding-top: 50px;
            .wheel-w {
                margin: 0 auto;
                width: 716px;
                height: 716px;
                background-image: url("./img2/yuanquan_wai@2x.png");
                background-size: 778px 742px;
                background-position: center top;
                position: relative;
                transition: all 8s cubic-bezier(0.26, 1, 0.1, 1);

                .wheel-n {
                    width: 524px;
                    height: 524px;
                    background-image: url("./img2/yuanquan_nei@2x.png");
                    background-size: 100% 100%;
                    position: absolute;
                    top: 98px;
                    left: 96px;
                    transform: rotate(22.5deg);
                    .prize-img {
                        display: block;
                        width: 170px;
                        height: 170px;
                        position: absolute;
                        top: -240px;
                        &:nth-child(1) {
                            top: 4px;
                            left: 176px;
                        }
                        &:nth-child(2) {
                            top: 60px;
                            left: 296px;
                            transform: rotate(45deg);
                        }
                        &:nth-child(3) {
                            top: 180px;
                            left: 352px;
                            transform: rotate(90deg);
                        }
                        &:nth-child(4) {
                            top: 300px;
                            left: 296px;
                            transform: rotate(135deg);
                        }
                        &:nth-child(5) {
                            top: 356px;
                            left: 170px;
                            transform: rotate(180deg);
                        }
                        &:nth-child(6) {
                            top: 300px;
                            left: 46px;
                            transform: rotate(225deg);
                        }
                        &:nth-child(7) {
                            top: 176px;
                            left: -6px;
                            transform: rotate(270deg);
                        }
                        &:nth-child(8) {
                            top: 50px;
                            left: 50px;
                            transform: rotate(315deg);
                        }
                    }
                }
                .rod {
                    width: 592px;
                    height: 582px;
                    background-image: url("./img2/gunzi@2x.png");
                    background-size: 100% 100%;
                    position: absolute;
                    top: 74px;
                    left: 60px;
                    transform: rotate(22.5deg);
                }
            }
            .draw-btn {
                padding: 72px 62px 40px 70px;
                width: 196px;
                height: 196px;
                background-image: url("./img2/draw-btn.png");
                background-size: 100% 100%;
                position: absolute;
                top: 298px;
                left: 274px;
                font-size: 32px;
                font-weight: 800;
                color: #8513CB;
                line-height: 42px;
                user-select: none;
            }
        }
    }
</style>
